{extend name="public/public"} {block name='css'}
<style>
  @media only screen and (max-width: 767px) {
    .contact-info {
      margin-bottom: 30px;
    }
  }
  .contact-info .single-info {
    font-size: 16px;
    font-weight: 300;
  }
  .contact-info .single-info:not(:last-child) {
    margin-bottom: 20px;
  }
  .contact-info .single-info h5 {
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: 500;
    color: #7d91aa;
  }
  .contact-info .single-info p:last-child {
    margin-bottom: 0;
  }
  .contact-info .single-info a {
    color: #333;
    display: inline-block;
    margin-right: 8px;
  }

  .contact-form {
    border: 1px solid #cad4de;
    padding: 40px;
    border-radius: 3px;
  }
  .contact-form input:not([type="submit"]),
  .contact-form textarea {
    border: 1px solid #cad4de;
    width: 100%;
    background-color: #f9fbfd;
    margin-bottom: 30px;
    border-radius: 3px;
    height: 40px;
    text-indent: 20px;
  }
  .contact-form input:not([type="submit"])::-webkit-input-placeholder,
  .contact-form textarea::-webkit-input-placeholder {
    color: #7d91aa;
  }
  .contact-form input:not([type="submit"])::-moz-placeholder,
  .contact-form textarea::-moz-placeholder {
    color: #7d91aa;
  }
  .contact-form input:not([type="submit"]):-ms-input-placeholder,
  .contact-form textarea:-ms-input-placeholder {
    color: #7d91aa;
  }
  .contact-form input:not([type="submit"]):-moz-placeholder,
  .contact-form textarea:-moz-placeholder {
    color: #7d91aa;
  }
  .contact-form input:not([type="submit"]):focus,
  .contact-form textarea:focus {
    outline: none;
    border: 1px solid;
  }
  .contact-form textarea {
    height: 120px;
    padding-top: 10px;
  }
  .c1 {
    margin: 30px 0;
  }
  .c2 {
    font-size: 22px;
    color: #333;
    letter-spacing: 1px;
  }
  .c3 {
    font-size: 16px;
    margin-top: 6px;
    color: #666;
  }
  .google-map {
    height: 500px;
    position: relative;
    z-index: 1;
  }
  .my-map {
    margin: 0 auto;
    width: 100%;
    height: 100%;
  }
  .my-map .icon {
    background: url(http://lbs.amap.com/console/public/show/marker.png)
      no-repeat;
  }
  .my-map .icon-cir {
    height: 31px;
    width: 28px;
  }
  .my-map .icon-cir-red {
    background-position: -11px -5px;
  }
  .amap-container {
    height: 100%;
  }
  @media screen and (max-width: 750px) {
    .google-map {
      height: 300px;
    }
    .contact-form {
      padding: 20px;
    }
    .sp {
      padding: 30px 0;
    }
  }
</style>
{/block} {block name="content"}
<div class="contact-area sp">
  <div class="container">
    <div class="row">
      <div class="col-md-5 contact-info">
        <div class="c1">
          <div class="c2">联系我们</div>
          <div class="c3">contact us</div>
        </div>
        <div class="single-info">
          <h5>客服热线：</h5>
          <p>{$c['web_mobile']}</p>
        </div>
        <div class="single-info">
          <h5>邮箱：</h5>
          <p>{$c['web_email']}</p>
        </div>
        <div class="single-info">
          <h5>地址：</h5>
          <p>{$c['company_addr']}</p>
        </div>
      </div>
      <div class="col-md-7">
        <form action="#" class="contact-form">
          <div class="row">
            <div class="col-lg-6">
              <input type="text" placeholder="请输入姓名" name="name" />
            </div>
            <div class="col-lg-6">
              <input
                type="email"
                placeholder="请输入邮箱（选填）"
                name="email"
              />
            </div>
            <div class="col-lg-12">
              <input type="text" placeholder="请输入手机号码" name="phone" />
            </div>
            <div class="col-lg-12">
              <textarea
                placeholder="请输入备注（选填）"
                name="notes"
              ></textarea>
            </div>
            <div class="col-lg-12 c1">
              <button type="button" class="button">提交信息</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<div class="google-map">
  <div id="wrap" class="my-map">
    <div id="mapContainer"></div>
  </div>
</div>

{/block} {block name='js'}
<script>
  $(".c1 button").click(function (res) {
    if ($("input[name='name']").val() == "") return layer.msg("请输入姓名");

    var phoneReg = /^[1][2-9][\d]{9}/;
    if (!phoneReg.test($('input[name="phone"]').val()))
      return layer.msg("请输入正确的手机号");

    var form = $("form").serialize();
    if (navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i)) {
      form = form + "&client=移动端浏览器";
    } else {
      form = form + "&client=电脑端浏览器";
    }
    $.post("{:url('contact')}", form, function (res) {
      if (res.code == 200) {
        alert("提交成功");
        location.reload();
      } else {
        layer.msg(res.tips);
      }
    });
  });
</script>

<script src="//webapi.amap.com/maps?v=1.3&key=8325164e247e15eea68b59e89200988b"></script>
<script>
  var lng = Number("{$c['company_lag']}");
  var lat = Number("{$c['company_lat']}");
  !(function () {
    var infoWindow,
      map,
      level = 16,
      center = { lng: lng, lat: lat },
      features = [
        {
          type: "Marker",
          name: "{$c['company_name']}",
          desc: "{$c['company_addr']}",
          color: "red",
          icon: "cir",
          offset: { x: -9, y: -31 },
          lnglat: { lng: lng, lat: lat },
        },
      ];

    function loadFeatures() {
      for (
        var feature, data, i = 0, len = features.length, j, jl, path;
        i < len;
        i++
      ) {
        data = features[i];
        switch (data.type) {
          case "Marker":
            feature = new AMap.Marker({
              map: map,
              position: new AMap.LngLat(data.lnglat.lng, data.lnglat.lat),
              zIndex: 3,
              extData: data,
              offset: new AMap.Pixel(data.offset.x, data.offset.y),
              title: data.name,
              content:
                '<div class="icon icon-' +
                data.icon +
                " icon-" +
                data.icon +
                "-" +
                data.color +
                '"></div>',
            });
            break;
          case "Polyline":
            for (j = 0, jl = data.lnglat.length, path = []; j < jl; j++) {
              path.push(
                new AMap.LngLat(data.lnglat[j].lng, data.lnglat[j].lat)
              );
            }
            feature = new AMap.Polyline({
              map: map,
              path: path,
              extData: data,
              zIndex: 2,
              strokeWeight: data.strokeWeight,
              strokeColor: data.strokeColor,
              strokeOpacity: data.strokeOpacity,
            });
            break;
          case "Polygon":
            for (j = 0, jl = data.lnglat.length, path = []; j < jl; j++) {
              path.push(
                new AMap.LngLat(data.lnglat[j].lng, data.lnglat[j].lat)
              );
            }
            feature = new AMap.Polygon({
              map: map,
              path: path,
              extData: data,
              zIndex: 1,
              strokeWeight: data.strokeWeight,
              strokeColor: data.strokeColor,
              strokeOpacity: data.strokeOpacity,
              fillColor: data.fillColor,
              fillOpacity: data.fillOpacity,
            });
            break;
          default:
            feature = null;
        }
        if (feature) {
          AMap.event.addListener(feature, "click", mapFeatureClick);
        }
      }
    }

    function mapFeatureClick(e) {
      if (!infoWindow) {
        infoWindow = new AMap.InfoWindow({ autoMove: true });
      }
      var extData = e.target.getExtData();
      infoWindow.setContent(
        "<h5>" + extData.name + "</h5><div>" + extData.desc + "</div>"
      );
      infoWindow.open(map, e.lnglat);
    }

    map = new AMap.Map("mapContainer", {
      center: new AMap.LngLat(center.lng, center.lat),
      level: level,
      keyboardEnable: false,
      scrollWheel: false,
    });

    loadFeatures();

    map.on("complete", function () {
      map.plugin(["AMap.ToolBar", "AMap.OverView", "AMap.Scale"], function () {
        map.addControl(new AMap.ToolBar());
        map.addControl(new AMap.OverView({ isOpen: true }));
        map.addControl(new AMap.Scale());
      });
    });
  })();
  $(".nav-active-4").addClass("current-menu-item");
</script>
{/block}
